<template>
  <div id="Servicedetails">
    <div v-show="show">

      <group>
        <cell class="tit" :title="'售后单号 '+itemDetails.customer_ordernum" :inline-desc="'状态: '+itemDetails.status+itemDetails.different_status+itemDetails.handle_type">
          <span class="slo" @click="showPlugin(itemDetails.btn_status,itemDetails.goodsName,itemDetails.different_money,itemDetails.different_status,itemDetails.handle_type)">{{itemDetails.btn_status}}</span>
        </cell>
      </group>
      <group label-width="5.5em">
        <x-input title="提交日期" disabled v-model="itemDetails.order_addtime"></x-input>
      </group>
      <group label-width="5.5em">
        <!--<popup-picker title="规　　格" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
        <x-input title="规　　格" disabled v-model="itemDetails.customer_model.specifications_model"></x-input>
      </group>
      <group label-width="5.5em">
        <!--<datetime title="生产日期" v-model="makeTime" value-text-align="left"></datetime>-->
        <x-input title="生产日期" disabled v-model="itemDetails.customer_model.product_time"></x-input>
      </group>
      <group label-width="5.5em">
        <!--<popup-picker title="保修类别" placeholder="请选择" :data="guigeList" v-model="size" value-text-align="left"></popup-picker>-->
        <x-input title="保修类别" disabled v-model="itemDetails.customer_model.guarantee_category"></x-input>
      </group>
      <group label-width="20em">
        <x-input title="问题描述" disabled></x-input>
      </group>
      <group class="bug" label-width="15em">
        <p>
          {{itemDetails.customer_question}}
        </p>
        <p>
          <i>备注：</i>
          <span>{{itemDetails.customer_details}}</span>
        </p>
      </group>
      <group class="speed">
        <cell :title="'售后进度'" :link="'/gitem/service/step/'+itemDetails.id+'/'+itemDetails.customer_ordernum+'?status='+itemDetails.status+itemDetails.different_status+itemDetails.handle_type">
        </cell>
      </group>
      <group label-width="5.5em">
        <x-input title="受理商家" disabled v-model="itemDetails.supplier" style="border-bottom: 1px solid #eeeeee"></x-input>
        <x-input title="联系电话" disabled v-model="itemDetails.return_phone"></x-input>
      </group>
      <x-button type="primary" style="margin: 30px auto 0" action-type="button" @click.native="nextFun(itemDetails.customer_ordernum)"><i><img
        src="../../assets/images/tousu.png" alt=""></i>投诉商家</x-button>
    </div>
    <divider v-show="!show">查无数据</divider>

    <div class="list" v-transfer-dom>
      <confirm v-model="showBox"
               confirm-text="同意"
               cancel-text="拒绝"
               @on-confirm="onConfirm"
               @on-cancel="closeConfirm">
        <div>
          <p v-html="altHtml"></p>
          <p>{{altGoods}}</p>
        </div>

      </confirm>
    </div>
    <div v-transfer-dom>
      <alert v-model="submitAlert"  :content="submitAlertMsg"></alert>
    </div>
  </div>
</template>

<script>
  import {  Cell , Group,GroupTitle,XInput,Datetime,PopupPicker,Selector, Checker, CheckerItem,XTextarea,XButton, Divider , cookie,Confirm,TransferDomDirective as TransferDom ,AlertModule,Alert } from 'vux'
  import { sorts,sign } from '../../aes/make';
  import { Decrypt} from '../../aes/aes';
  import { getCustInfoById,paymentCust,upCustomerStatus } from '../../mock/api';
  export default {
    name: "service-details",
    directives: {
      TransferDom
    },
    components: {
      Group,
      Cell,
      GroupTitle,
      XInput,
      Datetime,
      PopupPicker,
      Selector,
      Checker,
      CheckerItem,
      XTextarea,
      XButton,
      Divider,
      Confirm,
      AlertModule,
      Alert
    },
    data(){
      return{
        id:0,
        show:false,
        showBox: false,
        money:'150.00',
        str:'加价',
        altHtml:'加价<span>（<i>150.00元</i>）</span>换新',
        altGoods:'银合金电池6—DZM-21.8',
        itemDetails:{
          customer_model:{}
        },
        nextType:'',
        submitAlert:false,
        submitAlertMsg:'',
      }
    },
    computed:{

    },
    created () {
      let vue = this
      vue.updateTitle('售后');
      vue.updateGreenRightNum(1);
      console.log(this.$route.query.next)
      if(this.$route.query.next){
        vue.updateUrlBack('/dist/index.html#/gitem/service/list');
        vue.updatePreventGoBack(true)
      }else{
        vue.updatePreventGoBack(false)
      }
    },
    mounted(){
        this.itemMsg();
    },
    methods: {
      itemMsg(){
        this.id=this.$route.params.id;
        var so=sorts();
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var json={
          custOrderId:this.id,
          requestType:0,
          sorts:so,
          uid:uid,
          access_token:access_token
        }
        var si=sign(json);
        json['sign']=si;
        getCustInfoById(json).then((res)=>{
            console.log(res);
          if(res.code==40013){
            vue.$router.push({name: 'login', params: {}});
            return false;
          }
          if(res.code==2003){
              this.show=false;
              return false;
          }
          if(res.code==2000){
            var jm=Decrypt(res.data);
            jm=JSON.parse(jm);
            // var jm=res.data;
            this.id=jm.id;
            if(jm['handle_type']==undefined){
              jm['handle_type']='';
            }
            if(jm.status=='检测完成'){
              if(jm.different_status==1){
                jm['btn_status']='需补差价';
              }else{
                jm['btn_status']='待确认';
              }
            }else if(jm.status=='确认未付款'){
              jm['btn_status']='去支付';
            }else if(jm.status=='确认收货'){
              jm['btn_status']='已完结';
              jm['status']='已完结';
              jm['handle_type']='';
              jm['different_status']='';
            }else if(jm.status=='已发货'){
              jm['btn_status']='确认收货';
            }else if(jm.status=='待处理'){
              jm['btn_status']='待处理';
              jm['handle_type']='';
              jm['different_status']='';
            }else{
              jm['btn_status']='';
            }
            if(jm['handle_type']==undefined){
              jm['handle_type']='';
            }
            if(jm['different_status']==1){
              jm['different_status']='加价';
            }else if(jm['different_status']==2){
              jm['different_status']='退款';
            }else{
              jm['different_status']='';
            }
              this.itemDetails=jm;
            this.show=true;
          }
        })
      },
      onConfirm () {
        if(this.nextType=='chajia'){
          this.upFun(5);
        }else if(this.nextType=='queren'){
          this.upFun(9);
        }else{
          this.upFun(7);
        }
      },
      closeConfirm(){
       if(this.nextType=='queren'){
          this.upFun(7);
        }else{
         this.upFun(6);
       }
      },
      showPlugin(type,goods,price,status,handle_type) {
        if(type=="需补差价"){
          this.altGoods=goods;
          this.altHtml='加价<span>（<i>'+price+'</i>）</span>'+handle_type;
          this.nextType='chajia';
          this.showBox=true;
        }else if(type=="待确认"){
          this.altGoods=goods;
          if(status=='退款'){

            this.altHtml='退款<span>（<i>'+price+'</i>）</span>'+handle_type;
            this.nextType='tuikuan';
          }else{
            this.altHtml=handle_type;
            this.nextType=handle_type;
          }
          this.showBox=true;
        }else if(type=="去支付"){
          window.location.href='/index.php?s=/shop/pay/payment_cust&custOrderId='+this.id;
        }else if(type=="确认收货"){
          this.altGoods=goods;
          this.altHtml='是否确认收货';
          this.nextType='queren';
          this.showBox=true;
        }
      },
      upFun(s){
        var so=sorts();
        var uid=cookie.get('uid');
        var access_token=cookie.get('access_token');
        var json={
          custOrderId:this.id,
          status:s,
          sorts:so,
          uid:uid,
          access_token:access_token
        }
        if(s==9){
          json['take_type']=2;
        }
        var si=sign(json);
        json['sign']=si;
        upCustomerStatus(json).then((res)=>{
          if(res.code!=2000){
            this.submitAlertMsg=res.message;
            this.submitAlert=true;
          }else if(this.altHtml=='是否确认收货'){
            this.$router.push({ name: 'serviceList'})
          }else{
            location.reload();
          }
        })
      },
      nextFun(num){
        this.$router.push({ name: 'complaintIndex', query: {refuse:1,listType: 'service',orderNum:num }})
      }
    }
  }
</script>

<style lang="less" scoped>
  @hong:#cf0808;
  @blue:#1babe3;
  @green:#51ac33;
  .slo{
    color: @green;
  }
  .problem-item {
    width: 80px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 3px;
    border: 1px solid #F5F5F5;
    background: #F5F5F5 url(../../assets/images/quxiao.png) no-repeat left top;
    background-size:14px 14px;
    margin-right: 8px;
    color: #333333;
  }
  .problem-item-selected {
    background: #F5F5F5 url(../../assets/images/xuanzhong.png) no-repeat left top;
    background-size:14px 14px;
  }
  .bug{
    p{
      padding: 15px;
    }
    p:first-of-type{
      color: #333333;
      padding-bottom: 0px;
      font-size: 15px !important;
    }
    p:last-of-type{
      color: #646464 !important;
      font-size: 13px !important;
      padding-top: 8px;
      /*display: flex;*/
      /*justify-content: center;*/
      i{
        display: inline-block;
        width: 45px;
        float: left;
      }
      span{
        display: inline-block;
        width: 80%;
        overflow: hidden;
        min-height: 20px;
      }
    }
  }
</style>
